<template>
<div class="fg-page">
    <Layout>
        <Header>
            <BHeader :showLoginNow="true"></BHeader>
        </Header>
        <Content>
            <div class="fg-main">
                <div class="fg-title">
                    <p>重置密码</p>
                    <span>如有问题，请联系客服：400-801-9131</span>
                </div>
                <div class="fg-content">
                    <Form :model="form" ref="form" :rules="rules" label-position="right" :label-width="114">
                        <Form-item label="已绑定手机号" prop="phone">
                            <Input type="text" v-model.trim="form.phone" :maxlength="11" placeholder="输入11位手机号" size="large"></Input>
                        </Form-item>
                        <Form-item label="输入验证码" prop="message">
                            <Row>
                                <Col span="15"><Input type="text" v-model.trim="form.message" :maxlength="6" placeholder="输入验证码" size="large"></Input></Col>
                                <Col span="8" offset="1" v-if="!sendState"><Button type="primary" @click="getCode" size="large" long>获取验证码</Button></Col>
                                <Col span="8" offset="1" v-else><Button type="primary" @click="getCode" size="large" disabled long>{{codeTime}}s后可重发</Button></Col>
                            </Row>
                        </Form-item>

                        <common-password :password="form.password" :isLarge="true" @passwordChange="passwordChange"></common-password>

                        <Form-item label="确认登录密码" prop="passwordRepeat">
                            <Input type="password" v-model.trim="form.passwordRepeat" placeholder="再次输入密码" size="large"></Input>
                        </Form-item>
                        <Form-item>
                            <Button type="primary" @click="submitForm" :loading="loading" size="large" long>确认重置密码</Button>
                        </Form-item>
                    </Form>           
                </div>
            </div>
        </Content>
        <Footer>
            <BFooter></BFooter>
        </Footer>
    </Layout>
</div>
</template>

<script>
    import BHeader from 'components/BHeader'; //页头
    import BFooter from 'components/BFooter'; //页脚
	import CommonPassword from 'components/commons/password'; //密码输入框
    import {Storage} from '@/commons/js/utils';
    export default {
    	components: { BHeader,BFooter,CommonPassword },
        data(){
            const validatePhone = (rule, value, callback) => {
                if (!value) return callback(new Error('请输入已绑定的11位手机号'));                
                else if(!this.$utils.RegexUtils('MOBILE',value)) return callback(new Error('请输入有效的11位手机号'+'(当前长度：'+value.length+'位)'));
                else {
                    this.$ajax(this.$api.common.userCheck,{"mobile": this.form.phone},(RES)=>{
                        if(RES.code == 404) return callback(new Error('该手机号尚未注册或绑定，请先注册。'));
                        else callback();
                    },(error)=>{
                        return callback(new Error('服务器出错，请稍后重试'));
                    })
                }
            };
            const validateMessage = (rule, value, callback) => {
                if (!value) return callback(new Error('请输入短信验证码'));                
                else if(!this.$utils.RegexUtils('SMS',value)) return callback(new Error('请输入有效的6位短信验证码'+'(当前长度：'+value.length+'位)'));
                else if(!this.$utils.RegexUtils('MOBILE',this.form.phone)) return callback(new Error('请完善手机信息再填写验证码信息'));
                else {
                    this.$ajax(this.$api.common.verifyCode,{"mobile": this.form.phone,"code": value},(RES)=>{
                        Storage.remove('B_TOKEN');
                        if(RES.code == 200) {
                            Storage.setItem('B_TOKEN',RES.token);
                            callback();
                        }
                        else if(RES.code == 400) return callback(new Error('验证码有误，请重输'));
                        else if(RES.code == 454) return callback(new Error('验证码已过期，请重发'));
                        else callback();
                    },(error)=>{
                        Storage.remove('B_TOKEN');
                        return callback(new Error('服务器出错，请稍后重试'));
                    })
                }
            };
            const validatePassword = (rule, value, callback) => {
                if (!value) return callback(new Error('请输入登录密码'));
                else if(!this.$utils.RegexUtils('ISPWD',value)) callback(new Error('请输入6-16位数字字母字符'));
                else callback();
            };
            const validatePasswordRepeat = (rule, value, callback) => {
                if (!value) return callback(new Error('请确认登录密码'));
                else if(this.form.password != this.form.passwordRepeat) callback(new Error('与设置登录密码不一致，请重输'));
                else callback();
            };
            return{
                loading: false,
                form: {
                    phone: '',
                    message: '',
                    password: '',
                    passwordRepeat: ''
                },
                rules: {
                    phone: [
                        { validator: validatePhone, trigger: 'blur' }
                    ],
                    message: [
                        { validator: validateMessage, trigger: 'blur' }
                    ],                    
                    password: [
                        { validator: validatePassword, trigger: 'blur' }                 
                    ],
                    passwordRepeat: [
                        { validator: validatePasswordRepeat, trigger: 'blur' }                 
                    ],
                },
                sendState: false,//是否已发送验证码状态
                codeTime: 60,
                codeTimeFun: '',
            }
        },
        mounted(){
            this.init();
        },
        methods:{           
            init() {
                
            },            
            getCode() {
                this.$refs.form.validateField('phone',(valid) => {
                    if (!valid) {
                        this.$ajax(this.$api.common.sendCode,{"mobile": this.form.phone},(RES)=>{
                            if(RES.code == 200){
                                this.$Message.success('验证码已发送，请留意手机短信');
                                this.sendState = true;
                                this.setCodeTimeFun();
                            }                        
                        },(error)=>{    
                            console.log(error);
                            this.$Message.error('验证码发送失败，请稍后再试');
                        })
                    }
                })
            },
            passwordChange(val) {
                this.form.password = val;
            },
            setCodeTimeFun(){
                this.codeTimeFun = setInterval(this.backwardCodeTime,1000);
                this.codeTime = 60;
            },
            backwardCodeTime(){
                if(this.codeTime>0) this.codeTime--;
                else{
                    clearInterval(this.codeTimeFun);
                    this.sendState = false;
                }
            },
            submitForm() {
                console.log(this.form);
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        this.$ajax(this.$api.forgetPassword.reset,{
                            "mobile": this.form.phone,
                            "password": this.form.password
                        },(RES)=>{
                            this.loading = false;
                            if(RES.code == 200){
                                this.$Message.success('更改密码成功！正在为你跳转到登录页...');
                                setTimeout(()=>{
                                    this.$router.push('/login');
                                },3000)
                            }
                            else this.$Message.success('更改密码失败，请稍后重试');
                        },(error)=>{    
                            console.log(error);
                            this.loading = false;
                        })
                    }
                })
            },
        }
    }
</script>

<style lang="less" rel="stylesheet/less">
    .fg-page{
        background: @color-Background;
        &:before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: @color-Background;
            z-index: -1;
        }
    }

    .fg-main{
        width: @min-width;
        margin: 40px auto 80px;
        padding-bottom: 30px;
        background: #fff;

        .fg-title{
            height: 70px;
            padding: 0 30px;
            border-bottom: 1px solid @color-Divider;

            p{
                font-size: 18px;
                color: @color-Title;
                padding-top: 10px;
            }

            span{
                font-size: 12px;
                color: @color-Sub;
            }
        }
    }

    .fg-content{        
        width: 514px;
        margin: 50px auto 0;

        .ivu-poptip,.ivu-poptip-rel{
            width: 100%;
        }

        .ivu-form .ivu-form-item-label{
            padding-right: 30px;
        }
    }
</style>